import React, {Component} from 'react';
import './App.css';

class App extends Component {

    componentDidMount() {
        let me = this,
            scroll = document.getElementById("scroll"),
            inner = document.getElementsByClassName("inner"),
            speed = 10;

        let index = 0;
        setInterval(function () {
            scroll.scrollTop++;
            if (scroll.scrollTop === inner[0].offsetHeight) {
                //模拟请求过程
                setTimeout(function () {
                    index++;
                    me.setState({
                        data1: [index + "1", index + "2", index + "3", index + "4", index + "5", index + "6", index + "7", index + "8", index + "9", index + "10", index + "11", index + "12", index + "13", index + "14", index + "15", index + "16"],
                    })
                }, 2000)
            }
            if (scroll.scrollTop === inner[0].offsetHeight * 2) {
                scroll.scrollTop = 0;
                //模拟请求过程
                setTimeout(function () {
                    index++;
                    me.setState({
                        data2: [index + "1", index + "2", index + "3", index + "4", index + "5", index + "6", index + "7", index + "8", index + "9", index + "10", index + "11", index + "12", index + "13", index + "14", index + "15", index + "16"],
                    })
                }, 2000)
            }
        }, speed)


    }

    state = {
        data1: [11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11],
        data2: [22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22],
    };

    render() {
        let arr1 = [];
        let arr2 = [];
        for (let i in this.state.data1) {
            arr1.push(<div className="child" key={i}>{this.state.data1[i]}</div>);
            arr2.push(<div className="child" key={i}>{this.state.data2[i]}</div>);

        }

        return (
            <div className="App">
                <div className="scroll" id="scroll">
                    <div className="inner">
                        {arr1}
                    </div>
                    <div className="inner">
                        {arr2}
                    </div>
                    <div className="inner">
                        {arr1}
                    </div>
                </div>
            </div>
        );
    }
}

export default App;
